<template>
  <div class="card params-div-pos">
    <div class="title1">
      遥测数据走势图
    </div>
    <el-row>
      <el-col :span="12">
        <el-form>
          <el-form-item label="时间范围：">
            <el-select v-model="timeRange" placeholder="时间范围">
              <el-option label="30秒" value="30"></el-option>
              <el-option label="60秒" value="60"></el-option>
              <el-option label="120秒" value="120"></el-option>
              <el-option label="180秒" value="180"></el-option>
            </el-select>
          </el-form-item>
        </el-form>
      </el-col>
    </el-row>
    <el-row>
      <el-col :span="12" v-for="item in curSeqArr" :key="item">
        <div class="tm-chart-container chart-margin" >
          <el-row>
            <el-col :span="10">
              <el-text size="default">
                {{ item }} ({{ curVDict[item]?.name || '' }}) : {{ curVDict[item]?.value || 0 }}
              </el-text>
            </el-col>
          </el-row>
          <LineChartX :option="optionDict[item]"></LineChartX>
        </div>
      </el-col>
    </el-row>
  </div>
</template>

<script>
import LineChartX from '@/components/Charts/LineChartX.vue'
import { useWsStore } from '@/stores/ws-module'
import { initTm } from '@/api/wsObj.js'
import { mapState } from "pinia";
import { deepClone } from '@/comm/index.js'

export default {
  name: 'TmCharts',
  components: {
    LineChartX
  },
  data() {
    return {
      wsObj: null,
      curSeqArr: [],
      timeRange: '120',
      curVDict: {},
      chartVaObj: {},
      optionDict: {},
      options: {
        title: {
          //text: 'Pie Chart'
        },
        tooltip: {
          trigger: 'axis',
          formatter: function (params) {
            params = params[0];
            return (
                params.value[0] +
                ' : ' +
                params.value[1]
            );
          },
          axisPointer: {
            animation: false
          }
        },
        xAxis: {
          type: 'category',
          splitLine: {
            show: false
          }
        },
        yAxis: {
          type: 'value'
        },
        series: [
          {
            data: [],
            type: 'line',
            smooth: true
          }
        ]
      },
      intervalId: null
    }
  },
  computed: {
    ...mapState(useWsStore, ['tm'])
  },
  created() {
    this.wsObj = initTm()
    this.getPassSeq()
    this.generateOption()
    this.intervalId = setInterval(() => {
      this.getTmData()
    }, 1000)
  },
  beforeDestroy() {
    this.wsObj?.disconnect()
    clearInterval(this.intervalId)
  },
  methods: {
     getPassSeq() {
      const curHref = window.location.href
      let params = curHref.split("?seq=")[1]
      if(params !== '') {
        this.curSeqArr = params.split(",")
      }
    },
    generateOption() {
      this.curSeqArr.forEach(item => {
          this.optionDict[item] = deepClone(this.options)
      })
    },
    getTmData() {
      //根据seq的参数在tm中查询对应的value
      //value存储到数组中，并赋值给series
      //传递给options的series
      //更新chart
      this.curSeqArr.forEach(item => {
        const v = this.tm[item]?.valuedb || 0
        const name = this.tm[item]?.description || ''
        Object.assign(this.curVDict, { [item]: { name: name, value: v} })
        const now = new Date().toLocaleTimeString()
        if( this.optionDict[item].series[0].data.length >= parseInt(this.timeRange) ) {
          this.optionDict[item].series[0].data.shift()
        }
        this.optionDict[item].series[0].data?.push([now,v])
      })
    }
  }
}
</script>

<style lang="scss" scoped>
.tm-chart-container {
  height: 400px;
}
.params-div-pos {
  margin-top: 1em;
  padding-left: 15px;
  width: 98%
}
.chart-margin {
  margin-bottom: 3em;
}
</style>

